<template>
  <div>
    <el-button
      size="small"
      icon="el-icon-printer"
      class="print-btn"
      @click="$print($refs.print, null)"
    >
      打印
    </el-button>
    <div
      class="proposed-pager"
      element-loading-background="rgba(255, 255, 255,1)"
      ref="print"
    >
      <div class="title">中共文山州委办公室批办性文件拟办单</div>
      <table  class="table-wrapper" border="1px" cellspacing="0" cellpadding="0">
        <!-- 固定表头 -->
        <!-- 如果formData有值 -->
        <tr v-if="!firstHandler" class="first-row">
          <td width="8%" align="center" class="hidden-l-border">来文单位</td>
          <td width="12%">
            <span>{{ headerData.originUnit }}</span>
          </td>
          <td width="8%" align="center">文件字号</td>
          <td width="12%">
            <span>{{ headerData.documentNum }}</span>
          </td>
          <td width="8%" align="center">收文日期</td>
          <td width="12%">
            <span>{{ parseTime(headerData.reciptDate, '{y}/{m}/{d}')}}</span>
          </td>
          <td width="8%" align="center">密级</td>
          <td width="12%">
            <span>{{ headerData.level }}</span>
          </td>
          <td width="8%" align="center">收文字号</td>
          <td width="12%" class="hidden-r-border">
            <span>{{ headerData.reciptNum }}</span>
          </td>
        </tr>
        <tr v-else class="first-row">
          <td width="8%" align="center" class="hidden-l-border">来文单位</td>
          <td width="12%">
            <el-input v-model="headerData.originUnit" placeholder="请输入" />
          </td>
          <td width="8%" align="center">文件字号</td>
          <td width="12%">
            <el-input v-model="headerData.documentNum" placeholder="请输入" />
          </td>
          <td width="8%" align="center">收文日期</td>
          <td width="12%">
            <el-date-picker
              v-model="headerData.reciptDate"
              type="date"
              placeholder="请选择"
              style="width: 80px"
            />
          </td>
          <td width="8%" align="center">密级</td>
          <td width="12%">
            <el-input v-model="headerData.level" placeholder="请输入" />
          </td>
          <td width="8%" align="center">收文字号</td>
          <td width="12%" class="hidden-r-border">
            <el-input v-model="headerData.reciptNum" placeholder="请输入" />
          </td>
        </tr>
        <tr class="first-row">
          <td width="8%" align="center" class="hidden-l-border">文件标题</td>
          <td colspan="9" class="hidden-r-border">
            <span>{{ fileNames || pager.title }}</span>
          </td>
        </tr>
        <!-- 领导意见 -->
        <tr v-for="(val, key, index) in pointData" :key="index" class="advice">
          <td colspan="10" class="hidden-l-border hidden-r-border">
            <div class="cell-block point-name">{{ key }}:</div>
            <div class="inform" v-for="(p, i) in pointData[key]" :key="i">
              <div style="text-indent: 1rem">{{ p.message }}</div>
              <div class="info">
                <div class="info-name">{{ p.userId }}</div>
                <div>{{ parseTime(p.time) }}</div>
              </div>
            </div>
          </td>
        </tr>
        <!-- 意见 -->
        <!-- 未输入基本信息，同时不是预览时 显示意见输入框 -->
        <tr v-if="!firstHandler && !queryData.isHand" class="situation">
          <td
            align="center"
            class="hidden-l-border hidden-r-border"
            style="text-align: right"
          >
            意 见:
          </td>
          <td colspan="9" class="hidden-r-border">
            <el-input type="textarea" :rows="4" v-model="comment" placeholder="请输入"/>
          </td>
        </tr>
        <!-- 备注 -->
        <!-- <tr class="remark">
          <td
            align="center"
            class="hidden-l-border hidden-r-border"
            style="text-align: right"
          >
            备 注:
          </td>
          <td colspan="9" class="hidden-r-border"></td>
        </tr> -->
      </table>
    </div>
  </div>
</template>
<script>
import { parseTime } from "@/utils/index.js";
import _ from 'lodash'
export default {
  name: "ProposedPager",
  props: {
    pager: {
      type: Object,
      default: () => {},
    },
    queryData: {
      type: Object,
      default: () => {},
    },
    pointData: {
      type: Array,
      default: () => [],
    }
  },
  watch: {
    pointData: {
      handler(data) {
        const { variables = {} } = this.queryData;
        this.firstHandler = false
        const { fromData } = variables;
        if(!fromData) {
          this.firstHandler = true
        }
        this.headerData = fromData || {};
      },
      immediate: true
    },
  },
  computed: {
    fileNames() {
      const { taskFile = [] } = this.pager
      const fileList = taskFile.map(file => file.name)
      return fileList.join(',')
    }
  },
  data() {
    return {
      comment: '',
      firstHandler: false,
      headerData: null,
    };
  },
  methods: {
    parseTime,
    // 判断对象是否为空
    isEmpty(obj) {
      return _.isEmpty(obj)
    }
  },
};
</script>
<style lang="scss">
.proposed-pager {
  table td {
    // border-color: red;
    border: 1px solid;
  }
  .table-wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
    font-size: 14px;
    font-weight: bold;
    color: red;
    border-collapse: collapse;

    td {
      span {
        display: inline-block;
        margin-left: 6px;
        color: #000;
        font-weight: normal;
        word-break: break-all;
      }
    }

    .el-input__inner {
      background-color: transparent;
      border: 0;
    }
  }
}
</style>
<style lang="scss">
.print-btn {
  position: absolute;
  right: 20px;
}
.proposed-pager {
  margin: 0 0 20px;
  overflow-x: hidden;
  .first-row {
    height: 40px;
    td:nth-child(odd) {
      padding: 8px 6px;
      letter-spacing: 3px;
      line-height: 20px;
    }
  }
  .advice {
    min-height: 120px;
    height: 160px;

    td {
      vertical-align: top;

      .point-name {
        font-size: 14px;
        font-weight: bold;
        color: red;
      }
      .inform {
        height: 70px;
        padding: 0 10px 10px 18px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e0e0e0;
        color: #000;
        font-weight: normal;

        &-comment {
          width: 60%;
        }

        .info {
          float: right;
          font-size: 12px;
          text-align: center;
          color: #797979;

          &-name {
            padding: 6px;
          }
        }

        &:last-child {
          border: none;
        }
      }
    }
  }
  .cell-block {
    height: 100%;
    padding: 10px;
    font-size: 14px;
    color: #000;
    font-weight: normal;
  }
  .situation {
    height: 80px;
    .el-textarea {
      padding: 10px 0 10px 10px;
    }
  }
  .remark {
    height: 40px;
  }
  .hidden-l-border {
    border-left-color: #fff;
  }
  .hidden-r-border {
    border-right-color: #fff;
  }
  .title {
    text-align: center;
    font-size: 25px;
    color: red;
    padding: 15px 0px;
  }
  .footer {
    width: 700px;
    margin: 10px auto;
    text-align: right;
  }
  // 隐藏日期选择 图标
  .el-input__prefix {
    display: none !important;
  }
  .el-input__inner {
    background-color: transparent;
    border: 0;
    padding: 0 0 0 2px;
  }
}
</style>

      
